<template>
  <div class="comment-container">
    <el-table
      v-loading="listLoading"
      :data="data"
      border
      style="width: 100%"
      element-loading-text="加载数据中"
      fit
      highlight-current-row
    >
      <!-- 序号 -->
      <el-table-column
        prop="date"
        label="序号"
        align="center"
        width="60"
      >
        <template slot-scope="scope">{{ scope.$index + (currentPage - 1) * eachPage + 1}}</template>
      </el-table-column>

      <!-- 头像 -->
      <el-table-column
        label="头像"
        width="100"
        align="center"
      >
        <template slot-scope="scope">
          <el-avatar
            shape="square"
            size="small"
            :src="scope.row.avatar"
          ></el-avatar>
        </template>
      </el-table-column>

      <!-- 昵称 -->
      <el-table-column
        label="昵称"
        width="150"
        align="center"
      >
        <template slot-scope="scope">{{ scope.row.nickname }}</template>
      </el-table-column>

      <!-- 评论文章 -->
      <el-table-column
        label="评论文章"
        width="120"
        align="center"
      >
        <template slot-scope="scope">{{ scope.row.blog.title }}</template>
      </el-table-column>

      <!-- 评论内容 -->
      <el-table-column
        label="评论内容"
        align="center"
      >
        <template slot-scope="scope">{{ scope.row.content }}</template>
      </el-table-column>

      <!-- 评论日期 -->
      <el-table-column
        prop="createDate"
        label="评论日期"
        align="center"
        width="240"
      >
        <template slot-scope="scope">{{ scope.row.createDate }}</template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column
        label="操作"
        align="center"
        width="150"
        class-name="small-padding fixed-width"
      >
        <!-- 操作和编辑按钮 -->
        <template slot-scope="scope">
          <el-row>
            <!-- 删除按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="删除"
              placement="top-start"
              :hide-after="1500"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deleteButton(scope.row)"
                circle
              ></el-button>
            </el-tooltip>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top:20px"
      class="pageList"
      background
      :page-size="eachPage"
      :page-sizes="[5, 8, 20]"
      layout="prev, pager, next, ->, total, sizes, jumper"
      :total="totalCount"
      @size-change="sizeChangeHandle"
      @current-change="currChangeHandle"
      @prev-click="prevClickHandle"
      @next-click="nextClickHandle"
    >
    </el-pagination>
  </div>
</template>
<script>
import { formatDate } from '@/utils/formatDate';
import { deleteComment, getComment } from '@/api/comment';
export default {
  data() {
    return {
      data: [], // 数据详情

      listLoading: false,

      currentPage: 1, // 当前页码
      eachPage: 5, // 每页显示条数
      totalPage: 0, // 总页数
      count: 0, // 数据总条数
      totalCount: 0,//数据总条数
      pagerCurrentPage: 1, // 分页栏当前页码
    }
  },
  created() {
    this.getFetch();
  },
  methods: {
    /* 获取评论数据 */
    getFetch() {
      getComment({
        page: this.currentPage,
        eachPage: this.eachPage
      }).then(({ data }) => {
        console.log(data)
        this.data = data.rows;
        for (var res of this.data) {
          res.createDate = formatDate(res.createDate);
        };
        // 组件的总数据数(totalCount)等于获取到的data数据的总数据数(total)
        this.totalCount = data.total;

        // 取得 总页数 = 总数据条 / 每页显示条数
        this.totalPage = Math.ceil(this.totalCount / this.eachPage);

        // 设置分界 (当前页数大于总页数或者小于最小页数)
        if (this.currentPage > this.totalPage) { //当前页数超出
          this.currentPage = this.totalPage;
          this.getFetch();
        }
      })
    },

    /* 删除留言 */
    deleteButton(dataInfo) {
      this.getFetch();
      /* 弹出警告是否删除 */
      this.$confirm("是否删除此条评论信息?", "提示", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        /* 发送删除评论请求 */
        deleteComment(id).then((res) => {
          console.log(res);
          this.fetchData();
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },
    // pageSize 改变时会触发 改变每一页显示的条数
    sizeChangeHandle(pagerNum) {
      this.currentPage = 1;
      this.pagerCurrentPage = 1;
      this.eachPage = ~~pagerNum;
      this.getFetch();
    },
    // currentPage 改变时会触发
    currChangeHandle(numberPage) {
      //~~ 去掉数字前面的0 或者是 去掉小数点 取反
      this.currentPage = ~~pageNum;
      this.getFetch();
    },
    // 用户点击上一页按钮改变当前页后触发
    prevClickHandle() {
      this.currentPage -= 1;
    },
    // 	用户点击下一页按钮改变当前页后触发
    nextClickHandle() {
      this.currentPage += 1;
    },
  },
}
</script>
<style lang="scss" scoped>
.comment-container {
  padding: 40px;
}
.pageList {
  margin-top: 30px;
}
</style>